{{ 'ride-style-power-bank.css' | asset_url | stylesheet_tag }}
<div class="class-style ride-style-power-bank">
  <div class="page-width">
    <div class="ride-style-power-bank-wrapper">
      <div class="power-bank-item power-bank-item__level1">
        <div class="head-wrapper">
          <div class="head-wrapper-container">
            <div class="head-wrapper__title">
              {{ section.settings.title1 }}
            </div>
            <div class="head-wrapper__text">
              {{ section.settings.text1 }}
            </div>
          </div>
        </div>
        <div class="image-wrapper">
          <div
            class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings {% if section.settings.image1 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image1 != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image1.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="
                {%- if section.settings.image1.width >= 323 -%}{{ section.settings.image1 | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image1.width >= 360 -%}{{ section.settings.image1 | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image1.width >= 710 -%}{{ section.settings.image1 | img_url: '710x' }} 710w,{%- endif -%}
                {%- if section.settings.image1.width >= 1140 -%}{{ section.settings.image1 | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if section.settings.image1.width >= 1200 -%}{{ section.settings.image1 | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.image1.width >= 1780 -%}{{ section.settings.image1 | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image1.width >= 2000 -%}{{ section.settings.image1 | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if section.settings.image1.width >= 3000 -%}{{ section.settings.image1 | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if section.settings.image1.width >= 3840 -%}{{ section.settings.image1 | img_url: '3840x' }} 3840w,{%- endif -%}" 
              sizes="{% if section.settings.image1 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image1 != blank %}50vw{% else %}100vw{% endif %}" 
              data-src="{{ section.settings.image1 | img_url: '1500x' }}"
              loading="lazy" 
              class="lazyload" 
              alt="{{ section.settings.image1.alt | escape }}" 
              width="{{ section.settings.image1.width }}"
              height="{{ section.settings.image1.height }}"
            >
          </div>
          <div
            class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings {% if section.settings.image_mobile1 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image_mobile1 != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile1.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="
                {%- if section.settings.image_mobile1.width >= 323 -%}{{ section.settings.image_mobile1 | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 360 -%}{{ section.settings.image_mobile1 | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 710 -%}{{ section.settings.image_mobile1 | img_url: '710x' }} 710w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 1140 -%}{{ section.settings.image_mobile1 | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 1200 -%}{{ section.settings.image_mobile1 | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 1780 -%}{{ section.settings.image_mobile1 | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 2000 -%}{{ section.settings.image_mobile1 | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 3000 -%}{{ section.settings.image_mobile1 | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if section.settings.image_mobile1.width >= 3840 -%}{{ section.settings.image_mobile1 | img_url: '3840x' }} 3840w,{%- endif -%}"
              sizes="{% if section.settings.image_mobile1 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_mobile1 != blank %}50vw{% else %}100vw{% endif %}"
              data-src="{{ section.settings.image_mobile1 | img_url: '1500x' }}"
              loading="lazy"
              class="lazyload"
              alt="{{ section.settings.image_mobile1.alt | escape }}"
              width="{{ section.settings.image_mobile1.width }}"
              height="{{ section.settings.image_mobile1.height }}"
            >
          </div>
        </div>
      </div>
      <div class="power-bank-item power-bank-item__level2">
        <div class="image-wrapper">
          <div
            class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings {% if section.settings.image2 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image2 != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image2.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="
                {%- if section.settings.image2.width >= 323 -%}{{ section.settings.image2 | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image2.width >= 360 -%}{{ section.settings.image2 | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image2.width >= 710 -%}{{ section.settings.image2 | img_url: '710x' }} 710w,{%- endif -%}
                {%- if section.settings.image2.width >= 1140 -%}{{ section.settings.image2 | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if section.settings.image2.width >= 1200 -%}{{ section.settings.image2 | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.image2.width >= 1780 -%}{{ section.settings.image2 | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image2.width >= 2000 -%}{{ section.settings.image2 | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if section.settings.image2.width >= 3000 -%}{{ section.settings.image2 | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if section.settings.image2.width >= 3840 -%}{{ section.settings.image2 | img_url: '3840x' }} 3840w,{%- endif -%}" 
              sizes="{% if section.settings.image2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image2 != blank %}50vw{% else %}100vw{% endif %}" 
              data-src="{{ section.settings.image2 | img_url: '1500x' }}"
              loading="lazy" 
              class="lazyload" 
              alt="{{ section.settings.image2.alt | escape }}" 
              width="{{ section.settings.image2.width }}"
              height="{{ section.settings.image2.height }}"
            >
          </div>
          <div
            class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings {% if section.settings.image_mobile2 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image_mobile2 != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile2.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="
                {%- if section.settings.image_mobile2.width >= 323 -%}{{ section.settings.image_mobile2 | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 360 -%}{{ section.settings.image_mobile2 | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 710 -%}{{ section.settings.image_mobile2 | img_url: '710x' }} 710w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 1140 -%}{{ section.settings.image_mobile2 | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 1200 -%}{{ section.settings.image_mobile2 | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 1780 -%}{{ section.settings.image_mobile2 | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 2000 -%}{{ section.settings.image_mobile2 | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 3000 -%}{{ section.settings.image_mobile2 | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if section.settings.image_mobile2.width >= 3840 -%}{{ section.settings.image_mobile2 | img_url: '3840x' }} 3840w,{%- endif -%}"
              sizes="{% if section.settings.image_mobile2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_mobile2 != blank %}50vw{% else %}100vw{% endif %}"
              data-src="{{ section.settings.image_mobile2 | img_url: '1500x' }}"
              loading="lazy"
              class="lazyload"
              alt="{{ section.settings.image_mobile2.alt | escape }}"
              width="{{ section.settings.image_mobile2.width }}"
              height="{{ section.settings.image_mobile2.height }}"
            >
          </div>
        </div>
        <div class="head-wrapper">
          <div class="head-wrapper-container">
            <div class="head-wrapper__title">
              {{ section.settings.title2 }}
            </div>
            <div class="head-wrapper__text">
              {{ section.settings.text2 }}
            </div>
          </div>
        </div>
      </div>
      <div class="power-bank-item power-bank-item__level3">
        <div class="head-wrapper">
          <div class="head-wrapper-container">
            <div class="head-wrapper__title">
              {{ section.settings.title3 }}
            </div>
            <div class="head-wrapper__text">
              {{ section.settings.text3 }}
            </div>
          </div>
        </div>
        <div class="image-wrapper">
          <div
            class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings {% if section.settings.image3 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image3 != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image3.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="
                {%- if section.settings.image3.width >= 323 -%}{{ section.settings.image3 | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image3.width >= 360 -%}{{ section.settings.image3 | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image3.width >= 710 -%}{{ section.settings.image3 | img_url: '710x' }} 710w,{%- endif -%}
                {%- if section.settings.image3.width >= 1140 -%}{{ section.settings.image3 | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if section.settings.image3.width >= 1200 -%}{{ section.settings.image3 | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.image3.width >= 1780 -%}{{ section.settings.image3 | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image3.width >= 2000 -%}{{ section.settings.image3 | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if section.settings.image3.width >= 3000 -%}{{ section.settings.image3 | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if section.settings.image3.width >= 3840 -%}{{ section.settings.image3 | img_url: '3840x' }} 3840w,{%- endif -%}" 
              sizes="{% if section.settings.image3 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image3 != blank %}50vw{% else %}100vw{% endif %}" 
              data-src="{{ section.settings.image3 | img_url: '1500x' }}"
              loading="lazy" 
              class="lazyload" 
              alt="{{ section.settings.image3.alt | escape }}" 
              width="{{ section.settings.image3.width }}"
              height="{{ section.settings.image3.height }}"
            >
          </div>
          <div
            class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings {% if section.settings.image_mobile3 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image_mobile3 != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile3.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="
                {%- if section.settings.image_mobile3.width >= 323 -%}{{ section.settings.image_mobile3 | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 360 -%}{{ section.settings.image_mobile3 | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 710 -%}{{ section.settings.image_mobile3 | img_url: '710x' }} 710w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 1140 -%}{{ section.settings.image_mobile3 | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 1200 -%}{{ section.settings.image_mobile3 | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 1780 -%}{{ section.settings.image_mobile3 | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 2000 -%}{{ section.settings.image_mobile3 | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 3000 -%}{{ section.settings.image_mobile3 | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if section.settings.image_mobile3.width >= 3840 -%}{{ section.settings.image_mobile3 | img_url: '3840x' }} 3840w,{%- endif -%}"
              sizes="{% if section.settings.image_mobile3 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_mobile3 != blank %}50vw{% else %}100vw{% endif %}"
              data-src="{{ section.settings.image_mobile3 | img_url: '1500x' }}"
              loading="lazy"
              class="lazyload"
              alt="{{ section.settings.image_mobile3.alt | escape }}"
              width="{{ section.settings.image_mobile3.width }}"
              height="{{ section.settings.image_mobile3.height }}"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Ride style Power Bank",
    "tag": "section",
    "class": "ride-style spaced-section spaced-section--full-width",
    "settings": [
      {
        "type": "image_picker",
        "id": "image1",
        "label": "Image 1"
      },
      {
        "type": "image_picker",
        "id": "image_mobile1",
        "label": "Image mobile 1"
      },
      {
        "type": "text",
        "id": "title1",
        "label": "Title 1"
      },
      {
        "type": "text",
        "id": "text1",
        "label": "Text 1"
      },
      {
        "type": "image_picker",
        "id": "image2",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "image_mobile2",
        "label": "Image mobile 2"
      },
      {
        "type": "text",
        "id": "title2",
        "label": "Title 2"
      },
      {
        "type": "text",
        "id": "text2",
        "label": "Text 2"
      },
      {
        "type": "image_picker",
        "id": "image3",
        "label": "Image 3"
      },
      {
        "type": "image_picker",
        "id": "image_mobile3",
        "label": "Image mobile3"
      },
      {
        "type": "text",
        "id": "title3",
        "label": "Title 3"
      },
      {
        "type": "text",
        "id": "text3",
        "label": "Text 3"
      },
      {
        "type": "checkbox",
        "id": "stack_images_on_mobile",
        "default": true,
        "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "adapt"
          },
          {
            "value": "small",
            "label": "small"
          },
          {
            "value": "large",
            "label": "large"
          }
        ],
        "default": "adapt",
        "label": "adapt"
      }
    ],
    "presets": [
      {
        "name": "Ride style Power Bank"
      }
    ]
  }
{% endschema %}